<template>
  <div class="upload-practise1">
    <nav-bar></nav-bar>
    <div class="page-main">
      <div class="xyd-container">
        <div class="xyd-c-title" style="padding: 0 15px;">
          <span style="float:left;">发布练习--基本信息</span>
        </div>
        <div class="xyd-c-content">
          <el-form :model="form" >
            <el-form-item label="练习标题：" :label-width="formLabelWidth">
              <el-input v-model="form.title" auto-complete="off" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="练习类型：" :label-width="formLabelWidth">
              <el-input v-model="form.exam_type" auto-complete="off" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="练习类型：" :label-width="formLabelWidth">
              <div class="xyd-container">
                <div class="xyd-c-title" style="line-height:40px;">资源版本列表</div>
                <div class="xyd-c-content">
                  <div v-if="sideCategory && sideCategory.length === 0" style="padding-left:10px;">暂无数据</div>
                  <div style="height:300px;overflow:scroll">
                    <el-tree
                      v-if="sideCategory && sideCategory.length !== 0"
                      :data="sideCategory"
                      :highlight-current="true"
                      :load="loadNode"
                      :props="props"
                      lazy>
                    </el-tree>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="语点类型：" :label-width="formLabelWidth">
              <el-select
                v-model="form.yd_type"
                placeholder="请选择语点类型"
                style="width:620px;"
              >
                <el-option
                  v-for="item,i in yd_types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="语点金额：" :label-width="formLabelWidth" >
              <el-input-number v-model="num1" ></el-input-number>
              <span style="font-size:20px;vertical-align:middle;"> x 3 = <span style="color:#f00;">{{num1 * 3}}</span></span>
              <span style="color:#999;font-size:12px;vertical-align:middle;margin-left:20px;">语点金额需要是3的倍数</span>
            </el-form-item>
          </el-form>
          <div class="btn-group">
            <button class="gray-btn" @click='next'>下一步</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { NavBar } from 'views/layout'
  import { getChild } from 'api/resource'
  import { submitPaper } from 'api/common'
  export default {

    name: 'uploadPractise1',
    components: {
      NavBar
    },
    data() {
      return {
        formLabelWidth: '120px',
        sideCategory: [],
        yd_types: [
          { label: '普通', value: 0 },
          { label: '钻石', value: 1 }
        ],
        num1: 1,
        form: {
          title: '',
          exam_type: '',
          yd_type: ''
        },
        props: {
          label: 'name',
          children: 'child'
        }
      };
    },
    created() {
      this.$store.dispatch('GetTopId', '课件')
      .then(id => {
        getChild({
          catid: id
        })
        .then(res => {
          this.sideCategory = res.data
        })
        .catch(err => console.log(err))
      })
      .catch(err => console.log(err))
    },
    methods: {
      next() {
        const { title, exam_type, yd_type } = this.form
        submitPaper({
          title,
          exam_type,
          category_id: this.category_id,
          yd_type,
          price: this.num1 * 3
        })
        .then(res => {
          this.$message({
            message: '试卷创建成功',
            type: 'success'
          })
          this.$router.push('/upload-practise2?id=' + res.data)
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
      },
      // 子级筛选获取下一级
      loadNode(node, resolve) {
        // node.level === 0时，下面的语句将为undefind
        // this.task_type_id = node.data.id
        if (node.level === 0) {
          return resolve(this.sideCategory)
        } else {
          this.category_id = node.data.id
          getChild({
            catid: node.data.id
          })
          .then(res => {
            resolve(res.data)
          })
          .catch(err => console.log(err))
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .upload-practise1{
    .page-main{
      >.xyd-container{
        .xyd-c-title{

        }
        >.xyd-c-content{
          padding: 80px;
          .btn-group{
            text-align: center;
            .gray-btn{
              width: 300px;
            }
          }
        }
      }
    }
  }
</style>